<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title></title>
		<style>
/*pop div*/
.dialog,.dialog__overlay{width: 100%;height: 100%;top: 0;left: 0;z-index: 9;}
.dialog{position: fixed;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;pointer-events: none;}
.dialog__overlay{position: absolute;z-index: 1;background: rgba(55, 58, 71, 0.9);opacity: 0;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;-webkit-backface-visibility: hidden;}
.dialog--open .dialog__overlay{opacity: 1;pointer-events: auto;}
.dialog__content{width: calc(90% - 30px);max-width: 560px;background: #fff;padding: 15px;position: relative;z-index: 5;opacity: 0;height: 50%;max-height: 70%;text-align:center;}
.dialog__content h2{margin: 20px auto;color:#a72542;font-size: 20px;}
.dialog__content .dialog__body{padding-bottom: 20px;height:calc(100% - 40px - 24px - 20px - 40px - 10px);font-size: 16px; line-height: 20px;}
.dialog--open .dialog__content{pointer-events: auto;}
.dialog__overlay{-webkit-transition-duration: 0.4s;transition-duration: 0.4s;}
.dialog.dialog--open .dialog__content,.dialog.dialog--close .dialog__content{-webkit-animation-duration: 0.4s;animation-duration: 0.4s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.dialog.dialog--open .dialog__content{-webkit-animation-name: anim-open;animation-name: anim-open;-webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);}
.dialog.dialog--close .dialog__content{-webkit-animation-name: anim-close;animation-name: anim-close;}
.dialog .close-dialog{width:80%;display:block;margin:0 auto;height:40px;line-height:40px;vertical-align:middle;border-radius:5px;text-align:center;background:#a72542;color:#fff;}
@-webkit-keyframes anim-open{0%{opacity: 0;-webkit-transform: scale3d(0, 0, 1);}100%{opacity: 1;-webkit-transform: scale3d(1, 1, 1);}}
@keyframes anim-open{0%{opacity: 0;-webkit-transform: scale3d(0, 0, 1);transform: scale3d(0, 0, 1);}100%{opacity: 1;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}}
@-webkit-keyframes anim-close{0%{opacity: 1;}100%{opacity: 0;-webkit-transform: scale3d(0.5, 0.5, 1);}}
@keyframes anim-close{0%{opacity: 1;}100%{opacity: 0;-webkit-transform: scale3d(0.5, 0.5, 1);transform: scale3d(0.5, 0.5, 1);}}
		</style>
	</head>

	<body>
		<a class="open-dialog">弹出</a>
		<!--兑换 start-->
		<div id="dialog-div" class="dialog">
			<div class="dialog__overlay"></div>
			<div class="dialog__content">
				
					<h2>提示</h2>
					<div class="dialog__body">
						恭喜您获得xx个咖啡豆！<br />关注咪咕咖啡微信公众号xxxxxxxxxxxxxxxxxxxx
				</div>
				 <a class="action close-dialog">我知道了</a>
			</div>
		</div>
		<!--兑换 end-->

		<script type="text/javascript" src="../js/jquery-1.11.0.js?time=New Date()"></script>
		<script>
			//弹出
			$("a.open-dialog").click(function() {
				$("#dialog-div").addClass("dialog--open");
			});
			//关闭弹出
			$("#dialog-div .close-dialog").click(function() {
				$("#dialog-div").removeClass("dialog--open").addClass("dialog--close");
				setTimeout(function() {
					$("#dialog-div").removeClass("dialog--close");
				}, 200)
			});

		</script>
	</body>

</html>